<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 0;
		}
		.homeimg {
			width: 60px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.home {
			width: 20px;
			height: 20px;
		}
		.words {
			padding-left: 40px;
		}
		.words ul {
			margin-top: 22px;
		}
		.words li {
			font-size: 16px;
			color: #606266;
			line-height: 2;
		}
		.orderbox {
			width: 100%;
			height: 300px;
			display: flex;
		}
		.orderinfo {
			width: calc(20% - 8px);
			height: 100%;
			margin-right: 8px;
		}
		.totalorder {
			width: 100%;
			height: 60px;
			background: #5cbea0;
			border-radius: 8px;
			color: #fff;
			padding-top: 5px;
			box-sizing: border-box;
		}
		.totalorder .numtitle {
			margin-top: 0;
		}
		.orderbox p {
			margin-left: 12px;
		}
		.neworder {
			border: 1px solid #ccc;
			width: 100%;
			height: 130px;
			margin-top: 12px;
		}
		.numtitle {
			font-size: 16px;
			margin-top: 5px;
		}
		.nums {
			font-size: 32px;
		}
		.jobs {
			display: flex;
			justify-content: space-between;
			padding-right: 10px;
			border: 1px solid #ddd;
			margin-top: 15px;
			width: 100%;
			height: 80px;
		}
		.orderrank {
			width: calc(20% - 8px);
			height: 100%;
			margin-left: 8px;
			background: rgb(94, 98, 104);
			color: #fff;
			border: 1px solid pink;
		}
		.ranktitle {
			font-size: 18px;
			white-space: nowrap;
			text-align: center;
			margin-top: 6px;
		}
		.rankline {
			width: 60%;
			height: 2px;
			background: #fff;
			margin: 10px auto;
		}
		.item {
			display: flex;
			justify-content: space-around;
		}
		.iteminfo {
			width: 20%;
			text-align: center;
			white-space: nowrap;
			font-size: 15px;
			line-height: 1.3;
		}
		.iteminfo:first-child {
			width: 10%;
		}
		.iteminfo:last-child {
			width: 30%;
		}
		.objectbox {
			margin-top: 10px;
			border: 1px solid #f4f4f4;
			padding: 10px;
		}
		.object {
			display: flex;
			flex-wrap: wrap;
		}
		.objectname {
			border: 1px solid #f3f3f3;
			font-size: 14px;
			width: 130px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			margin-right: 16px;
			margin-top: 16px;
		}
		.select {
			text-align: right;
			margin-top: 10px;
		}
		.table {
			margin-top: 20px;
			border: 1px solid #ccc;
		}
		.pagenation {
			text-align: center;
			margin-top: 40px;
		}
		#elcontain::-webkit-scrollbar {
			display: none;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}


		.gmap .mapMark {
			position: relative;
			font-size: 20px;
			color: #fff;
			background-color: #fb3709;
			height: 26px;
			padding: 0 5px;
			min-width: 30px;
			line-height: 25px;
			font-family: DINPro-Bold;
			border-radius: 4px;
			text-align: center;
			-ms-transform: translate(-50%,-120%);
			transform: translate(-50%,-120%)
		}
		.gmap .mapMark::before {
			content: '';
			position: absolute;
			border: 5px solid transparent;
			border-top-color: #fb3709;
			bottom: -10px;
			left: 50%;
			-ms-transform: translateX(-5px);
			transform: translateX(-5px)
		}
	</style>
</block>
<block name="content">
	<div>
		<div class="orderbox">
			<div class="orderinfo">
				<div class="totalorder">
					<p class="numtitle">订单总数</p>
					<p class="nums">{$count}</p>
				</div>
				<div class="neworder">
					<p class="numtitle">本月新增</p>
					<p class="nums">{$thisMonthCount}</p>

					<!-- 折线图 -->
					<div class="statisticsChart" id="statisticsChart" style="height:60px;left:-10px;"></div>

				</div>
				<div class="jobs">
					<div>
						<p class="numtitle">进行中任务</p>
						<p class="nums">{$doingCount}</p>
					</div>
					<div>
						<p class="numtitle">已完成任务</p>
						<p class="nums">{$finishCount}</p>
					</div>
				</div>
			</div>

			<!-- 高德地图 -->
			<div id="statisticsMap" class="gmap" style="width: calc(60% - 8px);height:100%;"></div>

			<div class="orderrank">
				<div class="ranktitle"><i class="el-icon-tickets"></i>订单总数 TOP 10 城市</div>
				<div class="rankline"></div>
				<div>
					<div class="item">
						<div class="iteminfo"></div>
						<div class="iteminfo"></div>
						<div class="iteminfo">任务数</div>
						<div class="iteminfo">占比</div>
					</div>
					<div class="item" v-for="(item, index) in cityRank" :key="index">
						<div class="iteminfo">{{index + 1}}</div>
						<div class="iteminfo">{{item.city}}</div>
						<div class="iteminfo">{{item.job}}</div>
						<div class="iteminfo">{{item.percent}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="objectbox">
			<div class="object">
				<div class="objectname">总任务（{$count}）</div>
				<div class="objectname">待店长下单（{$statusCounts['0']?:0}）</div>
				<div class="objectname">待审核（{$statusCounts['1']?:0}）</div>
				<div class="objectname">审核未通过（{$statusCounts['2']?:0}）</div>
				<div class="objectname">进行中（{$statusCounts['3']?:0}）</div>
				<div class="objectname">上画待验收（{$statusCounts['4']?:0}）</div>
				<div class="objectname">上画验收完成（{$statusCounts['5']?:0}）</div>
				<div class="objectname">下画待验收（{$statusCounts['6']?:0}）</div>
				<div class="objectname">订单完成（{$statusCounts['7']?:0}）</div>
				<div class="objectname">待报价（{$statusCounts['11']?:0}）</div>
				<div class="objectname">报价待审核（{$statusCounts['12']?:0}）</div>
				<div class="objectname">报价审核失败（{$statusCounts['13']?:0}）</div>
			</div>
			<div class="select">
				<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="table">
				<el-table :data="tableData" height="250" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}" >
					<el-table-column prop="order_no" label="订单编号"></el-table-column>
					<el-table-column prop="store_name" label="公司简称"></el-table-column>
					<el-table-column prop="audit_name" label="审核员"></el-table-column>
					<el-table-column prop="activity_name" label="活动名称"></el-table-column>
					<el-table-column prop="manager_name" label="客戶"></el-table-column>
					<el-table-column prop="order_status" label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.order_status == '0'">待店长下单</span>
							<span v-if="scope.row.order_status == '1'">待审核</span>
							<span v-if="scope.row.order_status == '2'">审核未通过</span>
							<span v-if="scope.row.order_status == '3'">进行中</span>
							<span v-if="scope.row.order_status == '4'">上画待验收</span>
							<span v-if="scope.row.order_status == '5'">上画验收完成</span>
							<span v-if="scope.row.order_status == '6'">下画待验收</span>
							<span v-if="scope.row.order_status == '7'">订单完成</span>
							<span v-if="scope.row.order_status == '11'">高空物料待报价</span>
							<span v-if="scope.row.order_status == '12'">高空物料报价待审核</span>
							<span v-if="scope.row.order_status == '13'">高空报价审核失败</span>
						</template>
					</el-table-column>
					<el-table-column prop="charger" label="项目负责人"></el-table-column>
					<el-table-column prop="partner_name" label="城市合伙人"></el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.order_no)">查看</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<!-- 导入折线图插件 -->
	<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
	<!-- 导入高德地图插件 -->
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=74d9a73db0edaf4ff73fddebdb1215ae"></script>
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    // 地图对象
                    mapObj: {
                        mapStyle: "amap://styles/0b49317ec4bc29b2396ec968cfe35e29",
                        zoom: 4,
                        center: [104, 34]
                    },
                    // 城市排名
                    cityRank: [
                        { city: "佛山", job: "30", percent: "30.00%",latitude: "23.028762",longitude: "113.122717" },
                        { city: "深圳", job: "20", percent: "20.00%",latitude: "22.547",longitude: "114.085947" },
                        { city: "北京", job: "50", percent: "50.00%",latitude: "39.90923",longitude: "116.397428" }
                    ],
                    searchinput: "",
                    // 城市排名
                    tableData: [],
                    param: {
                        order_status: '0,1,2,3,4,5,6,11,12,13',
                        key: '',
                        page: 1,
                        size: 10
                    },
                    total: 0,
                }
            },


            mounted: function() {
                this.initChart();// 初始化经纬度
                this.initMap();// 初始化地图
            },
            created: function () {
                this.getData();
            },
            methods: {
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Order/getData', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
                    this.param.page = 1;
                    this.getData();
                },
                toDetail(order_no) {
                    window.location.href = HOME_URL + "/orderAdmin/Order/detail?order_no=" + order_no;
                },
                // 初始化地图
                initMap(){
                    var $this = this;
                    var gmap = new AMap.Map("statisticsMap",$this.mapObj);
                    AMap.plugin(["AMap.ToolBar"], function() {
                        gmap.addControl(new AMap.ToolBar)
                    });
                    for (var i = 0; i < $this.cityRank.length; i++){
                        var marker = new AMap.Marker({
                            content: '<div class="mapMark">' + $this.cityRank[i].job + "</div>",
                            position: [$this.cityRank[i].longitude, $this.cityRank[i].latitude],
                            title: $this.cityRank[i].city,
                            offset: new AMap.Pixel(0,0),
                            map: gmap
                        })
                        gmap.add(marker);
                    }
                },
                // 初始化经纬度
                initChart(){
                    var $this = this;
                    var xAxisArr = ["1月","2月","3月","4月","5月","6月"];
                    var seriesArr = ["0","0","1","2","0","5"];
                    var myChart  = echarts.init(document.getElementById("statisticsChart"));
                    var option  = {
                        tooltip: {
                            trigger: "axis",
                            position: function($this , e, n, i, r) {
                                var o = {
                                    top: 10
                                };
                                return o[["left", "right"][ + ($this [0] < r.viewSize[0] / 2)]] = 5,
                                    o
                            }
                        },
                        color: ["rgba(49, 190, 159, 0.23)"],
                        grid: {
                            show: !1,
                            top: "10%",
                            bottom: "5%",
                            right: "0"
                        },
                        xAxis: [{
                            type: "category",
                            boundaryGap: !1,
                            data: xAxisArr,
                            show: !1
                        }],
                        yAxis: [{
                            type: "value",
                            show: !1
                        }],
                        series: [{
                            name: "子任务",
                            type: "line",
                            stack: "总量",
                            smooth: !0,
                            symbol: "none",
                            areaStyle: {
                                normal: {}
                            },
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        color: "#31BE9F"
                                    }
                                }
                            },
                            data: seriesArr
                        }]
                    };
                    myChart.setOption(option)
                }
            }
        })
	</script>
</block>